
<div class="home" style="width: 100%;">
  <div class="statistic">
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="8">
        <nz-statistic [nzSuffix]="'元'" [nzValue]="(statistic.totalPay | number:'1.2')!" [nzTitle]="'今日已支付'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="8">
        <nz-statistic [nzSuffix]="'元'" [nzValue]="(statistic.dayPay | number:'1.2')!" [nzValueStyle]="{ color: '#3F8600' }" [nzTitle]="'今日总金额'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="8">
        <nz-statistic [nzSuffix]="'元'" [nzValue]="(statistic.dayNotPay | number:'1.2')!" [nzValueStyle]="{ color: '#CF1322' }" [nzTitle]="'今日总额'"></nz-statistic>
      </nz-col>
    </nz-row>
  </div>

  <h3 style="margin: 20px 0">员工支付进度</h3>

  <nz-table #basicTable
            [nzScroll]="{y: '500px'}"
            [nzLoading]="loadingData"
            [nzFrontPagination]="false"
            [nzData]="listOfData">
    <thead>
    <tr>
      <th>姓名</th>
      <th>今日已支付</th>
      <th>今日总额</th>
      <th>支付进度</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.userName}}</td>
      <td>{{data.paid}}元</td>
      <td>{{data.totalPay}}元</td>
      <td><nz-progress [nzPercent]="(data.paid/data.totalPay)*100" [nzShowInfo]="false"></nz-progress></td>
    </tr>
    </tbody>
  </nz-table>
  <div style="text-align: center">
    <nz-pagination [nzPageIndex]="page" [nzTotal]="total" [nzShowTotal]="totalTemplate" (nzPageIndexChange)="changePage($event)"></nz-pagination>
    <ng-template #totalTemplate let-total>共 {{ total }} 条数据</ng-template>
  </div>
</div>
